<template>
<div>
    <h1>
       {{msg}}
    </h1>
    
    <alert type="success/info/danger/warning">
  ...
</alert>

<alert :show.sync="showRight" placement="top-right" duration="3000" type="success" width="400px" dismissable>
  <span class="icon-ok-circled alert-icon-float-left"></span>
  <strong>Well Done!</strong>
  <p>You successfully read this important alert message.</p>
</alert>

<alert :show.sync="showTop" placement="top" duration="3000" type="danger" width="400px" dismissable>
  <span class="icon-info-circled alert-icon-float-left"></span>
  <strong>Heads up!</strong>
  <p>This alert needs your attention.</p>
</alert>
</div>



</template>


<script>
export default {
  name: "Index",
  data() {
    return {
      msg: "mother fucker!!",
      result: "zhangsan"
    };
  }
};
</script>

<style scoped>
h1 {
  color: red;
}
</style>
